<template>
  <div>
    <Header></Header>
    <div class="s_bg">
      <div class="scd">
        <div class="b_h">
          <div class="name">
            <i class="el-icon-s-custom"></i>
            <span>护工详情</span>
          </div>
          <div class="pst">
            当前所在位置: <a @click.prevent="goHome">首页</a>&gt;<a
              @click.prevent="goPrevious"
              >护工平台</a
            >&gt;<a class="on">护工详情</a>
          </div>
        </div>
      </div>
    </div>
    <div
      style="width: 1280px; height: 575px; margin-left: 90px; margin-top: 10px"
    >
      <div style="width: 745px">
        <div style="display: flex">
          <img :src="nurse.nurseImg" width="200" height="300" />
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>护工名称</span>
              {{ nurse.nurseName }}
            </div>
            <div class="text item">
              <b>目前所在地: </b> {{ nurse.currentLocation }}
            </div>
            <div class="text item"><b>方言: </b>{{ nurse.dialect }}</div>
            <div class="text item">
              <b>学历: </b> {{ nurse.highestEducation }}
            </div>
            <div class="text item"><b>性别: </b> {{ nurse.nurseSex }}</div>
          </el-card>
        </div>

        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <span>会员观看</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >去充值</el-button
            >
          </div>
          <div class="text item">
            <b>护工联系电话:</b>{{ nurse.nursePhone }}
          </div>
          <div class="text item">
            <b>护工擅长服务类型:</b>{{ nurse.serviceItems }}
          </div>
          <div class="text item">
            <b>护工所持证件:</b>{{ nurse.relevantCertificates }}
          </div>
          <div class="text item"><b>证件过期时间:</b>{{ nurse.validity }}</div>
        </el-card>
      </div>

      <el-card class="box-card3">
        <div slot="header" class="clearfix">
          <div>类似护工</div>
        </div>
        <div style="width: 300px; height: 480px; overflow: auto">
          <div style="display: flex">
            <img
              src="https://zjfde.oss-cn-hangzhou.aliyuncs.com/9.jpg"
              style="width: 100px; height: 105px"
            />
            <div style="border: 2px purple solid; width: 200px; height: 100px">
              <div class="show">姓名: 张燕</div>
              <div class="show">联系电话: 暂无</div>
              <div class="show">求职意向: 住家/住院照护/育儿/全职/兼职</div>
              <div class="show">服务地区: 泉州</div>
              <div class="show">希望薪资: 7000+</div>
            </div>
          </div>
          <div style="display: flex">
            <img
              src="https://zjfde.oss-cn-hangzhou.aliyuncs.com/10.jpg"
              style="width: 100px; height: 105px"
            />
            <div style="border: 2px purple solid; width: 200px; height: 100px">
              <div class="show">姓名: 吴丽昀</div>
              <div class="show">联系电话: 暂无</div>
              <div class="show">求职意向: 住家/住院照护/育儿/全职/兼职</div>
              <div class="show">服务地区: 莆田</div>
              <div class="show">希望薪资: 7000+</div>
            </div>
          </div>
          <div style="display: flex">
            <img
              src="https://zjfde.oss-cn-hangzhou.aliyuncs.com/3.jpg"
              style="width: 100px; height: 105px"
            />
            <div style="border: 2px purple solid; width: 200px; height: 100px">
              <div class="show">姓名: 江玲芳</div>
              <div class="show">联系电话: 暂无</div>
              <div class="show">求职意向: 住家/住院照护/育儿/全职/兼职</div>
              <div class="show">服务地区: 厦门</div>
              <div class="show">希望薪资: 6000+</div>
            </div>
          </div>
          <div style="display: flex">
            <img
              src="https://zjfde.oss-cn-hangzhou.aliyuncs.com/4.jpg"
              style="width: 100px; height: 105px"
            />
            <div style="border: 2px purple solid; width: 200px; height: 100px">
              <div class="show">姓名: 张烜</div>
              <div class="show">联系电话: 暂无</div>
              <div class="show">求职意向: 住家/住院照护/育儿/全职/兼职</div>
              <div class="show">服务地区: 泉州</div>
              <div class="show">希望薪资: 6000+</div>
            </div>
          </div>
          <div style="display: flex">
            <img
              src="https://zjfde.oss-cn-hangzhou.aliyuncs.com/6.jpg"
              style="width: 100px; height: 105px"
            />
            <div style="border: 2px purple solid; width: 200px; height: 100px">
              <div class="show">姓名: 黄艺勤</div>
              <div class="show">联系电话: 暂无</div>
              <div class="show">求职意向: 住家/住院照护/育儿/全职/兼职</div>
              <div class="show">服务地区: 莆田</div>
              <div class="show">希望薪资: 6000+</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
  name: "NurseDetail",
  data() {
    return {
      nurse: null,
    };
  },
  components: { Header },
  methods: {
    goHome() {
      this.$router.push("/home");
    },
    goPrevious() {
      this.$router.push("/nursingPlatform");
    },
  },
  created() {
    console.log(this.$route.query.id);
    this.$axios
      .get("/NursingPlatform/getDetail", {
        params: {
          nurseId: this.$route.query.id,
        },
      })
      .then((res) => {
        console.log(res.data);
        this.nurse = res.data.data;
      });
  },
};
</script>

<style scoped>
.show {
  font-size: 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card1 {
  width: 600px;
}
.box-card2 {
  width: 750px;
  margin-top: 30px;
}
.box-card3 {
  margin-left: 900px;
  margin-top: -620px;
  padding: 30px;
  width: 300px;
  height: 550px;
}
.scd .b_h .pst {
  position: static;
  text-align: left;
  width: 90%;
  height: auto;
  line-height: 150%;
  padding: 15px 5%;
}
.scd .b_h .name,
.scd_em .b_h .name {
  width: 260px;
}
.scd .b_h,
.scd_em .b_h {
  width: 90%;
  height: 60px;
  line-height: 60px;
  margin-left: 90px;
  margin-top: 30px;
  border-bottom: 1px solid #bbb;
  position: relative;
  text-align: left;
  position: relative;
}
.scd .b_h .name,
.scd_em .b_h .name {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background: #0051ad;
  padding: 0 30px;
}
.scd .b_h .name img,
.scd .b_h .name span,
.scd_em .b_h .name img,
.scd_em .b_h .name span {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 41px;
  line-height: 41px;
  vertical-align: top;
  margin-top: 10px;
  font-size: 24px;
  color: #fff;
}
.scd .b_h .name img,
.scd_em .b_h .name img {
  width: 41px;
  height: 41px;
  margin-right: 3px;
}
.scd .b_h .pst,
.scd_em .b_h .pst {
  width: 60%;
  text-align: right;
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.scd .b_h .pst a,
.scd_em .b_h .pst a {
  font-size: 14px;
  color: #555;
}
.scd .b_h .pst a.on,
.scd .b_h .pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
.pst {
  width: 60%;
  text-align: right;
  position: absolute;
  margin-top: -10px;
  margin-left: 300px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.pst a {
  font-size: 14px;
  color: #555;
}
.pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
a.on {
  color: #0257b9;
}
</style>